<template>
  <KView class="circle-zone-item">
    <KView class="circle-zone-item-info">
      <template v-if="hasAvatar">
        <KView class="circle-zone-item-avatar" @click="avatarClick">
          <sys-avatar :url="circle.headimgurl" shape="circle"></sys-avatar>
        </KView>
        <KView class="circle-zone-item-user">
          <KView class="circle-zone-item-name ellipsis">{{circle.name}}</KView>
          <KView class="circle-zone-item-time">{{circle.timeDistance}}</KView>
        </KView>
      </template>
      <template v-else>
        <KView class="circle-zone-item-datetime">{{$moment(circle.createTime).format('YYYY-MM-DD HH:mm')}}</KView>
      </template>

      <KView class="circle-zone-item-shop" v-if="circle.hasShop">
        <KView class="circle-zone-item-shop-btn" @click="toShop">
          <KView class="circle-zone-item-shop-btn-svg">
            <sys-svg name="shopMall" color="#ffffff"></sys-svg>
          </KView>
          <KView>进店</KView>
        </KView>
      </KView>
    </KView>
    <KView class="circle-zone-item-data">
      <circle-content-view :circle="circle"></circle-content-view>
    </KView>
    <KView class="circle-zone-item-upload" v-if="circle.uploadType!==''">
      <imgs-upload disabled v-if="circle.uploadType==='pic'" v-model="circle.pics">
      </imgs-upload>
      <KView v-else class="circle-zone-item-upload-video">
        <video-upload disabled v-model="circle.video"></video-upload>
      </KView>
    </KView>
    <KView class="circle-zone-item-location">
      <KView class="circle-zone-item-location-svg">
        <sys-svg name="location"></sys-svg>
      </KView>
      <KView style="flex:1">{{circle.location}}</KView>
    </KView>
    <KView class="circle-zone-item-log-div">
      <KView class="circle-zone-item-log-header clearfix">
        <KView class="circle-zone-item-log-read">{{circle.readCount}}阅读</KView>
        <KView class="circle-zone-item-log-btns">
          <KButton v-if="isMiniprogram" class="circle-zone-item-log-btn" :id="`type_${circle.id}`" open-type="share">
            <KView class="circle-zone-item-log-btn-inner">
              <KView class="circle-zone-item-log-btn-svg">
                <sys-svg name="share" color="#81848a"></sys-svg>
              </KView>
              <KView>分享</KView>
            </KView>
          </KButton>
          <KButton v-else class="circle-zone-item-log-btn">
            <KView class="circle-zone-item-log-btn-inner">
              <KView class="circle-zone-item-log-btn-svg">
                <sys-svg name="share" color="#81848a"></sys-svg>
              </KView>
              <KView>分享</KView>
            </KView>
          </KButton>

          <KButton class="circle-zone-item-log-btn" @click="toSpaceLog">
            <KView class="circle-zone-item-log-btn-inner">
              <KView class="circle-zone-item-log-btn-svg">
                <sys-svg name="discuss" color="#81848a"></sys-svg>
              </KView>
              <KView>评论({{circle.spaceLogCount}})</KView>
            </KView>
          </KButton>

          <KButton class="circle-zone-item-log-btn" @click="toPraise">
            <KView class="circle-zone-item-log-btn-inner">
              <KView class="circle-zone-item-log-btn-svg">
                <sys-svg name="heart2" :color="circle.isPraise?'#fc3d3d':'#81848a'"></sys-svg>
              </KView>
              <KView :style="{color:circle.isPraise?'#fc3d3d':'#81848a'}">{{circle.praiseCount}}</KView>
            </KView>
          </KButton>
        </KView>
      </KView>
      <KView class="circle-zone-item-log-content" v-if="circle.logList.length>0">
        <circle-log-view :circle="circle" :next-data-fun="nextDataFun" @praise-log="toPraiseLog"></circle-log-view>
      </KView>

      <KView v-if="hasLog" class="circle-zone-item-comment-log">
        <input class="circle-zone-item-comment-log-input" v-model="circleLog.content" :maxlength="120" :placeholder="circleLog.placeholder"
          @confirm="submitComment">
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysAvatar from 'common/sysAvatar';
  import SysSvg from 'common/sysSvg';
  import ImgsUpload from 'common/imgsUpload';
  import VideoUpload from 'common/videosUpload/videosUploadItem';
  import CircleContentView from './circleContentView';
  import CircleLogView from './circleLogView';

  import CommentCircleLog from 'models/sysCircle/commentCircleLog';

  export default {
    props: {
      circle: {
        type: Object,
        required: true
      },
      nextDataFun: {
        type: Function,
        required: true
      },
      hasAvatar: {
        type: Boolean,
        default: true
      },
      hasLog: {
        type: Boolean,
        default: false
      }
    },

    data() {
      let circleLog = null;
      if (this.hasLog) {
        let circle = this.circle;
        circleLog = new CommentCircleLog(circle.spaceId);
      }
      return {
        isMiniprogram: process.env.isMiniprogram,
        circleLog: circleLog
      };
    },

    methods: {
      toShop() {
        this.$emit('to-shop', this.circle);
      },

      toSpaceLog() {
        this.$emit('comment-circle', this.circle);
      },

      toPraise() {
        this.$emit('praise-circle', this.circle);
      },

      toPraiseLog(log) {
        this.$emit('praise-log', this.circle, log);
      },

      avatarClick() {
        this.$emit('avatar-click', this.circle);
      },

      submitComment() {
        this.$emit('submit-comment', this.circle, this.circleLog);
      }
    },

    components: {
      SysAvatar,
      SysSvg,
      ImgsUpload,
      VideoUpload,
      CircleContentView,
      CircleLogView
    }
  };

</script>

<style lang="scss">
  .circle-zone-item {
    .circle-zone-item-info {
      height: formatPx(74);
      display: flex;

      .circle-zone-item-avatar {
        width: formatPx(74);
        height: formatPx(74);
      }

      .circle-zone-item-user {
        flex: 1;
        min-width: 0;
        margin-left: formatPx(20);

        .circle-zone-item-name {
          font-size: formatPx(30);
          color: #565961;
        }

        .circle-zone-item-time {
          font-size: formatPx(24);
          color: #b6b8bc;
        }
      }

      .circle-zone-item-datetime {
        flex: 1;
        min-width: 0;
        height: formatPx(74);
        line-height: formatPx(74);
        color: #b6b8bc;
        font-size: formatPx(24);
      }

      .circle-zone-item-shop {
        width: formatPx(196);
        margin-left: formatPx(20);
        padding: formatPx(2) 0;

        .circle-zone-item-shop-btn {
          height: formatPx(70);
          line-height: formatPx(70);
          background: #fd9213;
          font-size: formatPx(30);
          color: #ffffff;
          border-radius: formatPx(35);
          display: flex;
          justify-content: center;

          .circle-zone-item-shop-btn-svg {
            width: formatPx(34);
            height: 100%;
            margin-right: formatPx(8);
          }
        }
      }
    }

    .circle-zone-item-data {
      margin-top: formatPx(30);
    }

    .circle-zone-item-upload {
      margin-top: formatPx(20);

      .circle-zone-item-upload-video {
        width: formatPx(220);
        height: formatPx(220);
      }
    }

    .circle-zone-item-location {
      margin-top: formatPx(24);
      height: formatPx(32);
      display: flex;
      font-size: formatPx(26);
      line-height: formatPx(32);
      color: #333333;

      .circle-zone-item-location-svg {
        width: formatPx(32);
        height: 100%;
        margin-right: formatPx(12);
      }
    }

    .circle-zone-item-log-div {
      margin-top: formatPx(30);

      .circle-zone-item-log-header {
        height: formatPx(32);

        .circle-zone-item-log-read {
          height: 100%;
          line-height: formatPx(32);
          color: #565961;
          float: left;
          font-size: formatPx(26);
        }

        .circle-zone-item-log-btns {
          height: 100%;
          float: right;
          display: flex;

          .circle-zone-item-log-btn {
            width: auto;
            height: 100%;
            border: none;
            background: none;
            line-height: formatPx(32);
            color: #81848a;
            font-size: formatPx(28);
            padding: 0;
            font-weight: normal;
            margin: 0;
            margin-right: formatPx(36);

            &:last-child {
              margin-right: 0;
            }

            &:active {
              background: none;
            }

            .circle-zone-item-log-btn-inner {
              height: formatPx(32);

              >div {
                float: left;
                height: 100%;
              }

              .circle-zone-item-log-btn-svg {
                width: formatPx(28);
                margin-right: formatPx(10);
              }
            }
          }
        }
      }

      .circle-zone-item-log-content {
        margin-top: formatPx(30);
        padding: formatPx(30);
        background: #f6f6f6;
      }

      .circle-zone-item-comment-log {
        margin-top: formatPx(20);
        height: formatPx(70);

        .circle-zone-item-comment-log-input {
          border: 1px solid #dadada;
          width: calc(100% - 2px - #{formatPx(40)});
          height: calc(100% - 2px);
          padding: 0 formatPx(20);
          border-radius: 8px;
          font-size: formatPx(26);
        }
      }
    }
  }

</style>
